<template>
	<view class="page_select">
		<view class="title"><uni-icons class="uni-combox__input-arrow jiantou" type="arrowleft" size="22" @click="backFn"></uni-icons>{{title}}</view>
		<view class="part2">
			<image class="search_img" src="../../static/iconimages/search.png" mode=""></image>
			<input class="search" type="text" value="" @input="onInput" v-model="inputVal" placeholder="请输入搜索关键词" />
		</view>
		<view class="part3">
			<view class="part3_view">
			<view class="item" :id="item.id" v-for="(item, index) in list" :key="index" @click="selectFn($event,index)">
				<view class="text">
					<image class="text_img" src="../../static/bj.jpg" mode=""></image>
					<text class="text_txt">{{item.value}}</text>
				</view>
				<image v-show="item.selected" class="selected" src="./img/selected.png" mode=""></image>
			</view>
			</view>
		</view>
		<view class="part4">
			<text class="allselect" @click="allFn">全选</text>
			<text class="flish" @click="flishFn">{{selected.length>0?`( ${selected.length} )完成`:'完成'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal: ''
			};
		},
		props:{
			show:{
				type:Boolean,
				default: false
			},
			title: {
				type:String,
				default: '选择'
			},
			selected: {
				type: Array,
				default: ()=> []
			},
			list: {
				type: Array,
				default: ()=> []
			}
		},
		methods:{
			backFn(){
				console.log(111222)
				this.$emit('update:show', false)
			},
			onInput() {
				const a = this.list.filter((item) => {
					return item.value.indexOf(this.inputVal) > -1
				})
				this.$emit('update:list', a)
			},
			selectFn(e, index) {
				this.$set(this.list[index],'selected', !this.list[index].selected)
				if(this.list[index].selected){
					this.selected.push(e.currentTarget.id)
				} else{
					let theindex
					for (let i = 0; i < this.selected.length; i++) {
						if(this.selected[i] === e.currentTarget.id){
							theindex = i
							break
						}
					}
					this.selected.splice(theindex, 1)
					console.log(this.selected, 999)
				}
				
			},
			flishFn(){
				if(this.selected.length > 0){
					this.$emit('getSelected', this.selected)
					this.$emit('update:show', false)
				} else{
					uni.showToast({
						icon: 'none',
						title: '选择项不能为空',
					})
				}
			},
			allFn(){
				if(this.selected.length === this.list.length){
					for (let i = 0; i < this.list.length; i++) {
						this.$emit('update:selected', [])
						this.list[i].selected = false
						if(i === this.list.length-1){
							this.$set(this.list[i], 'selected', false)
						}
					}
				} else{
					this.$emit('update:selected', [])
					// 不能直接获取到selected值，所以用了延迟
					const timeout = setTimeout(()=> {
						for (let i = 0; i < this.list.length; i++) {
							this.list[i].selected = true
							this.selected.push(this.list[i].id)
							if(i === this.list.length-1){
								this.$set(this.list[i], 'selected', true)
								this.$emit('update:selected', this.selected)
								clearTimeout(timeout)
							}
						}
					}, 1)
				}
			},
		},
		created() {
			
		}
	}
</script>

<style lang="less" scoped>
.setcenter(@direction, @content, @items) {
	display: -webkit-flex;
	/* Safari */
	display: flex;
	flex-direction: @direction;
	justify-content: @content;
	align-items: @items;
}
.page_select{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10000;
	top: 0px;
	left: 0px;
	background-color: #fff;
	padding: 50rpx 20rpx 20rpx 20rpx;
	box-sizing: border-box;
	.setcenter(column, flex-start, flex-start);
	.title{
		font-size:32rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		height: 60rpx;
		line-height:44rpx;
		position: relative;
		left: -5px;
		.setcenter(row, flex-start, center);
		.jiantou{
			margin-right: 10rpx;
		}
	}
	.part2{
		margin-top: 28rpx;
		width: 100%;
		height:72px;
		border-radius:36rpx;
		border:2rpx solid rgba(87,86,232,1);
		.setcenter(row, flex-start, center);
		.search_img{
			width:36rpx;
			height: 36rpx;
			margin: 0 20rpx;
		}
		.search{
			width: 100%;
		}
		margin-bottom: 40rpx;
	}
	.part3{
		width: 100%;
		overflow-y: hidden;
		flex-grow: 0;
		flex-shrink: 1;
		margin-bottom: 20rpx;
		.part3_view{
			height: 100%;
			.setcenter(column, flex-start, flex-start);
			overflow-y: auto;
		}
		
		.item{
			width: 100%;
			margin-bottom: 60rpx;
			.setcenter(row, space-between, center);
			.text{
				.setcenter(row, flex-start, center);
				.text_img{
					width:80rpx;
					height:80rpx;
					border-radius:16rpx;
					margin-right: 20rpx;
				}
				.text_txt{
					font-size:28rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:40rpx;
				}
			}
			.selected{
				width:40rpx;
				height:40rpx;
			}
		}
	}
	.part4{
		width: 100%;
		.setcenter(row, space-between, flex-start);
		.allselect{
			width:335rpx;
			height:84rpx;
			border-radius:44rpx;
			border:2rpx solid rgba(102,102,102,1);
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
			.setcenter(row, center, center);
		}
		.flish{
			width:335rpx;
			height:84rpx;
			background:rgba(87,86,232,1);
			border-radius:44rpx;
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
			.setcenter(row, center, center);
		}
	}
}
</style>
